<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="one two three" id="box" title="hello" data-id="1" asd="asd"></div>
</body>
<script>
    var box = document.getElementById("box");

    // 属性节点  写在标签内部的属性都叫属性节点 (官方的 + 用户自定义)
    // getAttribute(key)
    // console.log(box.getAttribute("class"));
    // console.log(box.getAttribute("id"));
    // console.log(box.getAttribute("title"));
    // console.log(box.getAttribute("data-id"));
    // console.log(box.getAttribute("asd"));

    // setAttribute(key,val)   根据键名设置属性值 (a.修改 b.新增)
    // box.setAttribute("class", "haha");
    // box.setAttribute("zxc", "haha");


    // 元素节点的属性
    // 元素节点  => 本质是一个对象 (存在很多修饰该对象的属性 )
    // Element.xxx

    // innerHTML
    // innerText
    // textContent

    // className
    // classList  (add remove replace contains)
    // id
    // title
    // tagName

    // style

    // href
    // src

    // name
    // value
    // type
    // placeholder
    // disabled
    // required
    // checked
    // selectedIndex
    // selectedOptions

    // clientWidth
    // offsetLeft



    console.dir(box);





</script>

</html>